<template>
    <el-form class="form">
        <el-form-item label="条款范围">
            <el-select
                v-model="searchParams.moduleList"
                size="mini"
                class="item"
                filterable
                clearable
                multiple
                collapse-tags
                @change="changeAccountControlValue(searchParams.moduleList)"
            >
                <el-option label="所有范围" value="-1" :disabled="Accountdisabled"></el-option>
                <el-option
                    v-for="item in moduleOptions"
                    :key="item.moduleCode"
                    :value="item.moduleCode"
                    :label="item.moduleName"
                    :disabled="AccountdisabledAll"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="账户查询">
            <el-select
                v-model="searchParams.fundCodes"
                size="mini"
                class="item"
                filterable
                clearable
                multiple
                collapse-tags
                @change="changeParamsValue(searchParams.fundCodes, 'fundCodes')"
            >
                <el-option
                    v-for="item in fundOptions"
                    :key="item.fundCode"
                    :value="item.fundCode"
                    :label="item.fundCode + ' ' + item.fundNameSt"
                ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="账户组查询">
            <el-select
                v-model="searchParams.fundGrCodes"
                size="mini"
                class="item"
                clearable
                filterable
                multiple
                collapse-tags
                @change="changeParamsValue(searchParams.fundGrCodes, 'fundGrCodes')"
            >
                <el-option
                    v-for="item in fundGroupOptions"
                    :key="item.fundGroupCode"
                    :value="item.fundGroupCode"
                    :label="item.fundGroupCode + ' ' + item.fundGroupName"
                ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label-width="0px">
            <el-button size="mini" type="primary" @click="handleBtn('search')" icon="el-icon-search">查询</el-button>
            <el-button size="mini" @click="handleBtn('reset')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts">
import { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';

@Component({ name: 'MonitorSearch', components: {} })
export default class MonitorSearch extends Vue {
    Accountdisabled: boolean = false;
    AccountdisabledAll: boolean = true;
    fundGroupOptions: any = [];
    fundOptions: any = [];
    moduleOptions: any = [];
    searchParams: any = {
        moduleList: ['-1'],
        fundCodes: [],
        fundGrCodes: [],
    };

    async mounted() {
        this.fundOptions = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
        this.getFundGroupList();
        this.getNoticeModulesList();
    }

    // 下拉框数据置顶
    private changeParamsValue(val: any = [], field): void {
        if (field == 'moduleList') {
            this.moduleOptions = changeOptions(val, this.moduleOptions, 'moduleCode');
        } else if (field == 'fundCodes') {
            this.fundOptions = changeOptions(val, this.fundOptions, 'fundCode');
        } else if (field == 'fundGrCodes') {
            this.fundGroupOptions = changeOptions(val, this.fundGroupOptions, 'fundGroupCode');
        }
    }

    private changeAccountControlValue(val: any = []): void {
        let all = val.find(item => item === '-1');
        if (val.length === 0) {
            this.Accountdisabled = false;
            this.AccountdisabledAll = false;
        } else if (all === '-1') {
            this.Accountdisabled = false;
            this.AccountdisabledAll = true;
        } else {
            this.Accountdisabled = true;
            this.AccountdisabledAll = false;
        }

        // 下拉框选中数据置顶
        this.changeParamsValue(this.searchParams.moduleList, 'moduleList');
    }

    /**
     * 按钮点击
     */
    async handleBtn(type: string) {
        if (type == 'reset') {
            // 清空
            this.searchParams = {
                moduleList: ['-1'],
                fundCodes: [],
                fundGrCodes: [],
            };
        }
        this.$emit('handle-btn', type);
    }

    private getNoticeModulesList() {
        this.$axios.get('/entry/subscribe/all/module/user').then((res: any) => {
            this.moduleOptions = res.filter(ele => ele.moduleType == '1');
        });
    }

    // 获取产品组
    private getFundGroupList(): void {
        this.$axios.post('/fundGroup/list').then((res: any) => {
            this.fundGroupOptions = res;
        });
    }
}
</script>
<style lang="scss" scoped>
.form {
    background: #fff;
    display: grid;
    grid-template-columns: repeat(3, 300px) 1fr;
    padding: 8px;
    margin-bottom: 10px;
    .el-form-item {
        margin-bottom: 0px;
        &:last-of-type {
            display: flex;
            align-items: center;
            /deep/ .el-form-item__content {
                display: flex;
                height: 32px;
            }
        }
    }

    .item {
        width: calc(100% - 80px);
    }
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    width: 100%;
}
/deep/ .el-select__tags {
    flex-wrap: nowrap;
}
</style>
